<template>
	<view class="appointment-container">
		<view class="appointment-form">
			<image class="form-background" src="/static/service/formback.jpg" mode="widthFix"></image>
			<view class="form-content-wrapper">
				<view class="form-header">
					<view class="header-top">
						<view class="header-title">
							<text class="title-text">{{
                serviceInfo.EQUITY_PARAMS_NAME || "门诊预约协助"
              }}</text>
							<view class="menu-btn" @tap="viewContent">≡</view>
						</view>
						<view class="header-desc">
							<image class="service-image" :src="BASE_URL + serviceInfo.EQUITY_PARAMS_IMG"
								mode="aspectFill" v-if="serviceInfo.EQUITY_PARAMS_IMG"></image>
							<text>{{
                serviceInfo.EQUITY_PARAMS_REMARK ||
                "提供预约挂号以及门诊就医门诊指导,不提供专家医疗建议"
              }}</text>
							<!-- <text></text> -->
						</view>
						<view class="usage-count">
							<text>剩余：</text><text
								class="count-num">{{ remainingCount }}</text><text>/已用{{ usedCount }}次</text>
						</view>
					</view>
				</view>

				<view class="form-details" v-if="imageStatusViewImage">
					<image :src="imagePath" class="content-index-image" mode="widthFix"></image>
				</view>

				<view class="form-content" v-if="formDataConfigStatus">
					<view class="section-title">
						<text class="title-box">服务内容</text>
					</view>
					<view class="form-item" v-for="(item, index) in formDataConfig.infos" :key="index">
						<text class="label">{{ item.label }}</text>
						<input v-if="item.type === 'text' || item.type === 'number'" :disabled="item.label === '就诊人'"
							class="input" v-model="item.value" :placeholder="item.placeholder || '请输入'"
							:type="item.type" />
						<picker v-if="item.type === 'date'" :mode="item.type" :value="item.value" @change="dateChange"
							:id="index">
							<view class="picker-value" v-if="!item.value">
								<text>{{ item.placeholder || "请选择日期" }}</text>
								<!-- <text class="picker-icon">&#xe65a;</text> -->
							</view>
							<view class="picker-value" v-else>{{ item.value }}</view>
						</picker>
						<picker v-if="item.type === 'select'" :value="item.value" :range="item.options">
							<view class="picker-value">
								<text>{{ item.placeholder || "请选择" }}</text>
								<!-- <text class="picker-icon">&#xe65a;</text> -->
							</view>
						</picker>
					</view>

					<!-- <view class="form-item">
            <text class="label">手机号码</text>
            <input
              class="input"
              type="number"
              v-model="formData.phone"
              placeholder="请输入您的手机号码"
              maxlength="11"
            />
          </view> -->

					<!-- <view class="form-item">
            <text class="label">预约日期</text>
            <picker
              mode="date"
              :value="formData.date"
              :start="startDate"
              :end="endDate"
              @change="dateChange"
            >
              <view class="picker-value">
                <text>{{ formData.date || "请选择预约日期" }}</text>
                <text class="picker-icon">&#xe65a;</text>
              </view>
            </picker>
          </view> -->

					<!-- <view class="form-item">
            <text class="label">预约时间</text>
            <picker
              mode="time"
              :value="formData.time"
              start="09:00"
              end="18:00"
              @change="timeChange"
            >
              <view class="picker-value">
                <text>{{ formData.time || "请选择预约时间" }}</text>
                <text class="picker-icon">&#xe65a;</text>
              </view>
            </picker>
          </view> -->
				</view>
				<view class="section-title-box" v-if="formDataConfigStatus">
					<view v-for="(items, index) in formDataConfig.suppleInfos" :key="index">
						<text class="title-box">{{ items.label }}</text>
						<textarea v-if="items.type === 'textarea'" class="textarea" v-model="items.value"
							:placeholder="items.placeholder || '请输入信息'" />
						<view class="example-body" v-if="items.type === 'upload'">
							<view class="upload-btn-area" @tap="chooseFile(index)">
								<view class="upload-icon">
									<image src="/static/service/upload.svg" mode="aspectFit" class="icon-img"></image>
								</view>
								<text class="upload-text">上传文件</text>
								<text class="upload-tip">PDF、Word、图片等文件</text>
							</view>
							<!-- 添加预览区域 -->
							<view class="preview-area" v-if="fileList.length > 0">
								<view class="preview-item" v-for="(file, fileIndex) in fileList" :key="fileIndex">
									<image v-if="file.type.startsWith('image')" :src="file.path" mode="aspectFill"
										class="preview-image"></image>
									<view v-else class="file-icon">
										<image src="/static/service/file-icon.svg" mode="aspectFit" class="icon-img">
										</image>
									</view>
									<view class="file-info">
										<text class="file-name">{{ file.name }}</text>
										<text class="file-size">{{
                      formatFileSize(file.size)
                    }}</text>
									</view>
									<view class="file-status" :class="file.status">
										<text>{{
                      file.status === "pending"
                        ? "待上传"
                        : file.status === "uploading"
                        ? "上传中"
                        : file.status === "success"
                        ? "上传成功"
                        : "上传失败"
                    }}</text>
										<progress v-if="file.status === 'uploading'" :percent="file.progress"
											show-info />
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="form-footer">
					<button class="submit-btn" @tap="submitForm" v-if="FORM_SUBMIT_STATUS">
						提交预约
					</button>
					<button class="submit-btn" @tap.stop="openKFUrl" v-if="ENTERPRISE_WECHAT_STATUS">
						联系客服
					</button>
					<button class="submit-btn" @tap.stop="openFWUrl" v-if="SERVICE_LINK_STATUS">
						服务链接
					</button>
					<button class="submit-btn time_out_btn" v-if="TIMER_OUT_STATUS" @tap.stop="preventSubmit">
						{{
              parseTime(
                viewStateObject.canNowUseObject[serviceInfo.EQUITY_TYPE]
                  .limitTime,
                "{y}-{m}-{d}"
              )
            }}后可使用
					</button>
					<!-- <button class="submit-btn" @tap="submitForm" v-if="
                    viewStateObject.canNowUseObject[serviceInfo.EQUITY_TYPE].canUse &&
                    serviceInfo.EQUITY_PARAMS_SERVICE === 'ENTERPRISE_WECHAT'
                  ">联系客服</button>
          <button class="submit-btn" @tap="submitForm" v-if="
                    viewStateObject.canNowUseObject[serviceInfo.EQUITY_TYPE].canUse &&
                    serviceInfo.EQUITY_PARAMS_SERVICE === 'SERVICE_LINK'
                  ">服务链接</button>
				<button class="submit-btn" @tap="submitForm" v-if="
                    !viewStateObject.canNowUseObject[serviceInfo.EQUITY_TYPE].canUse
                  ">{{
                    parseTime(
                      viewStateObject.canNowUseObject[serviceInfo.EQUITY_TYPE]
                        .limitTime,
                      "{y}-{m}-{d}"
                    )
                  }}后可使用</button> -->
				</view>
			</view>
		</view>
		<!-- <text> {{ serviceInfo.EQUITY_PARAMS_CONTENT }}</text> -->
		<uni-popup ref="popupcontent" type="bottom" background-color="#fff" border-radius="10px 10px 0 0">
			<view class="popup-box-text">
				<text :user-select="true">
					{{ serviceInfo.EQUITY_PARAMS_CONTENT }}</text>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import geneticTestingImg from "../../static/image/geneticTesting.jpg";
	import exclusiveHealthButlerImg from "../../static/image/exclusiveHealthButler.jpg";
	import hospitalPickUpServiceImg from "../../static/image/hospitalPickUpService.jpg";
	import interpretationOfPhysicalExaminationReportImg from "../../static/image/interpretationOfPhysicalExaminationReport.jpg";
	import OutpatientAppointmentRegistrationImg from "../../static/image/OutpatientAppointmentRegistration.jpg";
	// import geneticTestingImg from '../../static/image/geneticTesting.jpg'
	// import geneticTestingImg from '../../static/image/geneticTesting.jpg'
	// import geneticTestingImg from '../../static/image/geneticTesting.jpg'

	import {
		ref,
		onMounted,
		computed,
		getCurrentInstance,
		beforeUnmount,
	} from "vue";
	import {
		parseTime,
		errorStatus,
		getWxToken,
		validatePhone,
		loginAuthorize,
		handleBlob,
		arrayBufferToBase64,
		saveBase64ToTempFileMiniProgram,
	} from "/api/hook.js";
	import {
		submitAppointment,
		BASE_URL,
		fileUploadWX,
		getImage,
		editAppointment,
	} from "/api/base.js";
	import {
		FormConfigs
	} from "/api/config.js";

	const imagePath = ref(null);
	const imageObj = ref({
		geneticTesting: geneticTestingImg,
		exclusiveHealthButler: exclusiveHealthButlerImg,
		hospitalPickUpService: hospitalPickUpServiceImg,
		interpretationOfPhysicalExaminationReport: interpretationOfPhysicalExaminationReportImg,
		OutpatientAppointmentRegistration: OutpatientAppointmentRegistrationImg,
	});
	const imageStatusViewImage = ref(false);
	const formDataConfigStatus = ref(false);
	const viewStateObjectStatus = ref(false);
	const serviceInfo = ref({});
	const equityUse = ref({});
	const formData = ref({
		name: "",
		phone: "",
		date: "",
		time: "",
		remark: "",
		equityCardId: "",
		equityType: "",
	});
	const formDataConfig = ref({
		infos: [],
		suppleInfos: [],
	});

	// 计算剩余次数
	const remainingCount = computed(() => {
		if (!serviceInfo.value.EQUITY_TYPE || !equityUse.value) return "0次";

		if (serviceInfo.value.EQUITY_PARAMS_USETIME === -1) {
			return "无限次";
		}

		const total = Number(serviceInfo.value.EQUITY_PARAMS_USETIME) || 0;
		const used = Number(equityUse.value[serviceInfo.value.EQUITY_TYPE]) || 0;
		return total - used + "次";
	});

	// 已使用次数
	const usedCount = computed(() => {
		if (!serviceInfo.value.EQUITY_TYPE || !equityUse.value) return 0;
		return Number(equityUse.value[serviceInfo.value.EQUITY_TYPE]) || 0;
	});

	// 获取当前日期为起始日期
	const startDate = computed(() => {
		const today = new Date();
		return parseTime(today, "{y}-{m}-{d}");
	});

	// 结束日期为3个月后
	const endDate = computed(() => {
		const today = new Date();
		today.setMonth(today.getMonth() + 3);
		return parseTime(today, "{y}-{m}-{d}");
	});

	const orderId = ref("");
	const viewStateObject = ref(null);
	const FORM_SUBMIT_STATUS = ref(false);
	const ENTERPRISE_WECHAT_STATUS = ref(false);
	const SERVICE_LINK_STATUS = ref(false);
	const TIMER_OUT_STATUS = ref(false);
	const userName = ref("")
	onMounted(() => {
		// 获取路由参数
		try {
			const instance = getCurrentInstance().proxy;
			const eventChannel = instance.getOpenerEventChannel();
			eventChannel.on("appointmentData", function(data) {
				fileList.value = [];
				serviceInfo.value = data.serviceInfo;
				formData.value.equityCardId = data.cardId;
				formData.value.equityType = data.equityType;
				userName.value = data.userName || "";
				equityUse.value = data.equityUse;
				if (data.orderId) {
					orderId.value = data.orderId;
				} else {
					orderId.value = "";
				}
				if (
					FormConfigs[data.equityType] &&
					FormConfigs[data.equityType] !== undefined
				) {
					formDataConfigStatus.value = true;
					if (data.applyContent) {
						viewStateObjectStatus.value = true;
						FORM_SUBMIT_STATUS.value = true;
						formDataConfig.value = JSON.parse(JSON.stringify(data.applyContent));
						formDataConfig.value.suppleInfos.forEach((item) => {
							if (item.type === "upload") {
								item.fileList.forEach(async (items) => {
									const res = await getImage(items);
									let pathUrl =
										"data:image/png;base64," + uni
										.arrayBufferToBase64(res.data);
									// #ifdef MP-WEIXIN
									//   pathUrl = await saveBase64ToTempFileMiniProgram(
									//     "data:image/png;base64," + uni.arrayBufferToBase64(res.data),
									//     "image/png"
									//   );
									// #endif
									fileList.value.push({
										name: items,
										path: pathUrl,
										type: "image/png",
										size: 1024,
										status: "success",
										progress: 100,
									});
								});
							}
						});
					} else {
						formDataConfig.value = JSON.parse(
							JSON.stringify(FormConfigs[data.equityType])
						);
						let itemObj = formDataConfig.value.infos.find(
							(item) => item.label === "就诊人"
						);
						if (itemObj) {
							itemObj.value = data.userName;
						}
						formDataConfig.value.suppleInfos.forEach((item) => {
							if (item.type === "upload") {
								item.fileList = [];
							}
						});
						viewStateObject.value = data.cardInfo;
						setTimeout(() => {
							viewStateObjectStatus.value = true;
							FORM_SUBMIT_STATUS.value =
								viewStateObject.value.canNowUseObject[
									serviceInfo.value.EQUITY_TYPE
								].canUse &&
								serviceInfo.value.EQUITY_PARAMS_SERVICE === "FORM_SUBMIT";
							ENTERPRISE_WECHAT_STATUS.value =
								viewStateObject.value.canNowUseObject[
									serviceInfo.value.EQUITY_TYPE
								].canUse &&
								serviceInfo.value.EQUITY_PARAMS_SERVICE === "ENTERPRISE_WECHAT";
							SERVICE_LINK_STATUS.value =
								viewStateObject.value.canNowUseObject[
									serviceInfo.value.EQUITY_TYPE
								].canUse &&
								serviceInfo.value.EQUITY_PARAMS_SERVICE === "SERVICE_LINK";
							TIMER_OUT_STATUS.value = !viewStateObject.value.canNowUseObject[
								serviceInfo.value.EQUITY_TYPE
							].canUse;
						}, 10);
					}
				} else {
					formDataConfig.value = {
						infos: [],
						suppleInfos: [],
					};
					formDataConfigStatus.value = false;
					viewStateObject.value = data.cardInfo;
					setTimeout(() => {
						viewStateObjectStatus.value = true;
						FORM_SUBMIT_STATUS.value =
							viewStateObject.value.canNowUseObject[serviceInfo.value.EQUITY_TYPE]
							.canUse &&
							serviceInfo.value.EQUITY_PARAMS_SERVICE === "FORM_SUBMIT";
						ENTERPRISE_WECHAT_STATUS.value =
							viewStateObject.value.canNowUseObject[serviceInfo.value.EQUITY_TYPE]
							.canUse &&
							serviceInfo.value.EQUITY_PARAMS_SERVICE === "ENTERPRISE_WECHAT";
						SERVICE_LINK_STATUS.value =
							viewStateObject.value.canNowUseObject[serviceInfo.value.EQUITY_TYPE]
							.canUse &&
							serviceInfo.value.EQUITY_PARAMS_SERVICE === "SERVICE_LINK";
						TIMER_OUT_STATUS.value = !viewStateObject.value.canNowUseObject[
							serviceInfo.value.EQUITY_TYPE
						].canUse;
					}, 10);
				}
				if (
					data.equityType === "OutpatientAppointmentRegistration" &&
					data.serviceInfo.EQUITY_PARAMS_TENDENCY == 2
				) {
					formDataConfig.value.infos.splice(0, 1);
					formDataConfig.value.infos.splice(0, 1);
				}
				if (imageObj.value[data.equityType]) {
					imagePath.value = imageObj.value[data.equityType];
					imageStatusViewImage.value = true;
				} else {
					imagePath.value = null;
					imageStatusViewImage.value = false;
				}
			});
		} catch (error) {
			// 设置默认值
			serviceInfo.value = {
				EQUITY_PARAMS_NAME: "门诊预约协助",
				EQUITY_PARAMS_CONTENT: "提供预约挂号以及门诊就医门诊指导",
			};
		}
	});

	// 日期选择回调
	const dateChange = (e) => {
		formDataConfig.value.infos[Number(e.target.id)].value = e.detail.value;
	};

	// 时间选择回调
	const timeChange = (e) => {
		formData.value.time = e.detail.value;
	};

	// 返回上一页
	const back = () => {
		uni.navigateBack();
	};

	// 提交表单
	const submitForm = async () => {
		// 表单验证
		//

		// 显示加载中
		uni.showLoading({
			title: "提交中...",
			mask: true,
		});

		try {
			let obj = formDataConfig.value.infos.find(
				(e) => e.label.indexOf("电话") !== -1
			);

			if (!validatePhone(obj.value)) {
				uni.showToast({
					title: "手机号码格式错误",
					icon: "none",
				});
				return;
			}

			let appointmentData = {};
			let res = null;
			if (orderId.value) {
				// 提交预约信息
				appointmentData = {
					applyContent: JSON.stringify(formDataConfig.value),
					orderId: orderId.value,
				};
				res = await editAppointment(appointmentData);
			} else {
				// 提交预约信息
				appointmentData = {
					applyContent: JSON.stringify(formDataConfig.value),
					equitycardId: formData.value.equityCardId,
					equityType: formData.value.equityType, //formData.value.equityType,
				};
				res = await submitAppointment(appointmentData);
			}

			uni.hideLoading();
			if (
				res.data.state === "APPLY_SUCCESS" ||
				res.data.state === "UPDATE_SUCCESS"
			) {
				uni.showToast({
					title: res.data.state === "APPLY_SUCCESS" ? "预约成功" : "修改成功",
					icon: "success",
				});

				// 预约成功后返回上一页
				setTimeout(() => {
					if (res.data.state === "APPLY_SUCCESS") {
						uni.navigateBack();
					} else {
						uni.redirectTo({
							url: "/pageB/servicelog/servicelog",
						});
					}
				}, 1500);
			} else {
				if (res.data.state === "WX_USER_NOT_LOGIN") {
					await loginAuthorize();
					submitForm();
				} else {
					uni.showToast({
						title: errorStatus[res.data.state] || "预约失败",
						icon: "error",
					});
				}
			}
		} catch (error) {
			uni.hideLoading();
			uni.showToast({
				title: error.message || "预约失败，请稍后再试",
				icon: "none",
			});
		}
	};

	const popupcontent = ref(null);
	const viewContent = () => {
		popupcontent.value.open();
	};
	// 服务器API地址
	const UPLOAD_URL = BASE_URL + `/wx/upload/${getWxToken()}`;

	// 文件列表
	const fileList = ref([]);
	const isUploading = ref(false);
	const chooseFile = async (index) => {
		let obj = formDataConfig.value.suppleInfos[index];
		try {
			let chooseFiles = uni.chooseFile;
			if (
				typeof wx !== "undefined" &&
				typeof wx.chooseMessageFile === "function"
			) {
				chooseFiles = wx.chooseMessageFile;
			}
			if (typeof chooseFiles !== "function") {
				return reject({
					errMsg: " 请指定 type 类型，该平台仅支持选择 image 或 video。",
				});
			}
			const res = await chooseFiles({
				count: 1, // 最多选择9个文件
				type: "all", // 所有文件类型
				extension: ["jpg", "jpeg", "png", "pdf", "doc", "docx", "xls", "xlsx"],
				// 对于H5可以使用：
				// accept: 'image/*, .pdf, .doc, .docx, .xls, .xlsx'
			});

			// 添加到文件列表
			res.tempFiles.forEach((file) => {
				fileList.value.push({
					name: file.name,
					size: file.size,
					path: file.path,
					type: file.type,
					status: "pending",
					progress: 0,
				});
			});
			// 开始上传
			startUpload(obj);
		} catch (err) {
			console.error("选择文件失败:", err);
		}

		// fileUploadWX().then((res) => {
		// 	console.log(res, "res");
		// 	if(res.data.code === 200){
		// 		obj.fileList.push(res.data.url);
		// 	}else{
		// 		uni.showToast({
		// 			title: "上传失败，请稍后再试",
		// 			icon: "error"
		// 		})
		// 	}
		// })
	};

	const startUpload = async (obj) => {
		if (isUploading.value) return;
		isUploading.value = true;
		for (const file of fileList.value) {
			if (file.status === "success") continue;

			try {
				file.status = "uploading";

				const uploadTask = await uni.uploadFile({
					url: UPLOAD_URL,
					filePath: file.path,
					name: "file", // 对应后端接收的字段名
					formData: {
						fileName: file.name,
					},
					header: {
						"Content-Type": "multipart/form-data", // 需要显式声明
					},
					success: (res) => {
						if (res.statusCode === 200) {
							file.status = "success";
							const data = JSON.parse(res.data);
							uni.showToast({
								title: "上传成功",
								icon: "success",
							});
							obj.fileList.push(data.id);
						} else {
							file.status = "error";
							uni.showToast({
								title: "上传失败",
								icon: "error",
							});
						}
					},
					fail: (err) => {
						file.status = "error";
						uni.showToast({
							title: "上传失败",
							icon: "error",
						});
					},
				});

				// 监听上传进度
				uploadTask.onProgressUpdate((res) => {
					file.progress = res.progress;
				});
			} catch (err) {
				console.error("上传错误:", err);
				file.status = "error";
			}
		}

		isUploading.value = false;
	};

	// 格式化文件大小
	const formatFileSize = (bytes) => {
		if (bytes === 0) return "0 B";
		const k = 1024;
		const sizes = ["B", "KB", "MB", "GB"];
		const i = Math.floor(Math.log(bytes) / Math.log(k));
		return (bytes / Math.pow(k, i)).toFixed(2) + " " + sizes[i];
	};

	// 打开客服链接
	const openKFUrl = async () => {
		// 提交预约信息
		let appointmentData = {
			applyContent: JSON.stringify({
				infos: [{
					label: "服务类型",
					value: "联系客服",
					type: "text"
				},{
					label: "权益类型",
					value: serviceInfo.value.EQUITY_PARAMS_NAME,
					type: "text"
				}, {
					label: "就诊人",
					value: userName.value,
					type: "text",
				}],
				suppleInfos:[]
			}),
			equitycardId: formData.value.equityCardId,
			equityType: formData.value.equityType, //formData.value.equityType,
		};
		await submitAppointment(appointmentData);
		// 企业微信ID
		const corpid = "wwad4f8c3168b4cd3f";
		// 客服URL
		const customerUrl = "https://work.weixin.qq.com/kfid/kfcde45e508f03d00b0";

		// 检查是否在微信小程序环境
		if (
			uni.getSystemInfoSync().platform === "mp-weixin" ||
			uni.getSystemInfoSync().platform === "android" ||
			uni.getSystemInfoSync().platform === "ios"
		) {
			let stringsUrl =
				"权益人：" +
				viewStateObject.value.userName +
				"；服务：" +
				serviceInfo.value.EQUITY_PARAMS_NAME +
				"；卡号：" +
				viewStateObject.value.no;
			// 提交预约信息
			// const appointmentData = {
			//   applyContent: "联系客服",
			//   equitycardId: id,
			//   equityType: type, //formData.value.equityType,
			// };

			// const res = await submitAppointment(appointmentData);
			// console.log(res);
			// if (res.data.state === "APPLY_SUCCESS") {
			// 使用微信小程序原生API打开客服会话窗口
			wx.openCustomerServiceChat({
				extInfo: {
					url: customerUrl,
				},
				corpId: corpid,
				showMessageCard: true,
				sendMessageTitle: stringsUrl, // 可以传递自定义信息
				sendMessagePath: "/pages/index/index",
				sendMessageImg: "/static/index/index.jpg",
				success: () => {
					console.log("客服会话窗口打开成功");
				},
				fail: (err) => {
					console.error("客服会话窗口打开失败:", err);
					uni.showToast({
						title: "客服连接失败",
						icon: "none",
					});
				},
			});
			// }else {
			// 	throw new Error(errorStatus[res.data.state] || "预约失败");
			// }
		} else {
			// 非微信环境下可以使用其他方式处理
			uni.showToast({
				title: "仅支持在微信小程序中使用客服功能",
				icon: "none",
			});
		}
	};

	// 打开外部网址链接
	const openFWUrl = () => {
		// 检查是否在微信小程序环境
		if (
			uni.getSystemInfoSync().platform === "mp-weixin" ||
			uni.getSystemInfoSync().platform === "android" ||
			uni.getSystemInfoSync().platform === "ios"
		) {
			// 使用web-view组件打开外部链接
			uni.navigateTo({
				url: `/pageA/webview/index?url=${encodeURIComponent(
        serviceInfo.value.EQUITY_SERVICE_LINK
      )}`,
				fail: (err) => {
					uni.showToast({
						title: "打开链接失败",
						icon: "none",
					});
				},
			});
		} else {
			// 非微信环境下使用系统浏览器打开
			window.open(url, "_blank");
		}
	};

	const preventSubmit = (e) => {
		uni.showToast({
			title: "该服务暂不可用",
			icon: "none",
		});
	};
</script>

<style lang="scss" scoped>
	.appointment-container {
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	.appointment-form {
		padding: 24rpx;
		position: relative;
		min-height: 100vh;
	}

	.form-background {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: auto;
		z-index: 0;
	}

	.form-content-wrapper {
		position: relative;
		z-index: 1;
	}

	.form-header {
		margin-bottom: 20rpx;

		.header-top {
			background-color: #fff;
			padding: 30rpx;
			border-radius: 12rpx;
			position: relative;

			.header-title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20rpx;

				.title-text {
					font-size: 36rpx;
					font-weight: bold;
					color: #333;
				}

				.menu-btn {
					color: #45b6b0;
					font-size: 50rpx;
					line-height: 1;
					font-weight: 400;
				}
			}

			.header-desc {
				display: flex;
				flex-flow: row nowrap;
				justify-content: flex-start;
				font-size: 26rpx;
				color: #666;
				line-height: 1.6;
			}

			.usage-count {
				margin-top: 15rpx;
				font-size: 24rpx;
				color: #999;
				text-align: right;

				.count-num {
					color: #45b6b0;
					font-weight: bold;
				}
			}
		}
	}

	.form-content {
		background-color: #fff;
		padding: 20rpx 30rpx;
		margin-bottom: 30rpx;
		border-radius: 24rpx;

		.form-item {
			padding: 20rpx 0;
			border-bottom: 1px solid #f0f0f0;

			&:last-child {
				border-bottom: none;
			}

			.label {
				font-size: 30rpx;
				color: #333;
				margin-bottom: 20rpx;
				display: block;
			}

			.input {
				height: 80rpx;
				font-size: 28rpx;
				color: #333;
				width: 100%;
			}

			.textarea {
				width: 100%;
				height: 160rpx;
				font-size: 28rpx;
				color: #333;
			}

			.picker-value {
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 28rpx;
				color: #333;

				.picker-icon {
					font-family: "iconfont";
					color: #999;
				}
			}
		}
	}

	.form-footer {
		.submit-btn {
			background-color: #45b6b0;
			color: #fff;
			height: 90rpx;
			line-height: 90rpx;
			border-radius: 45rpx;
			font-size: 32rpx;
			font-weight: 500;
			border: none;
		}
	}

	.service-image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}

	.section-title-box {
		padding: 20rpx 30rpx;
		color: #333;
		border-bottom: 1px solid #f0f0f0;
		background-color: #fff;
		border-radius: 24rpx;
		margin: 20rpx 0;
	}

	.title-box {
		font-size: 32rpx;
		font-weight: 600;
		color: #45b6b0;
		display: inline-block;
	}

	.custom-upload-box {
		width: 100%;
		background-color: #f9f9f9;
		border-radius: 16rpx;
		overflow: hidden;
		margin: 20rpx 0;
	}

	.upload-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		background-color: #fff;
		border-bottom: 1px solid #f0f0f0;
	}

	.upload-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #45b6b0;
	}

	.upload-count {
		font-size: 24rpx;
		color: #999;
	}

	.upload-list {
		padding: 10rpx;

		.upload-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #fff;
			padding: 20rpx;
			margin-bottom: 10rpx;
			border-radius: 12rpx;
			box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
			transition: all 0.3s ease;
			border-left: 6rpx solid #45b6b0;

			&:hover {
				transform: translateX(5rpx);
			}

			.file-info {
				display: flex;
				align-items: center;
				flex: 1;
				overflow: hidden;

				.file-icon {
					width: 80rpx;
					height: 80rpx;
					margin-right: 20rpx;
					flex-shrink: 0;
					border-radius: 8rpx;
					border: 1px solid #eee;
				}

				.file-details {
					flex: 1;
					overflow: hidden;

					.file-name {
						font-size: 28rpx;
						color: #333;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
			}

			.delete-btn {
				width: 60rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				color: #999;
				font-size: 40rpx;
				flex-shrink: 0;
				background-color: #f5f5f5;
				border-radius: 50%;

				&:hover {
					color: #ff4d4f;
					background-color: #ffebeb;
				}
			}
		}
	}

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 12rpx;
		margin: 20rpx 0;

		.empty-icon {
			width: 100rpx;
			height: 100rpx;
			margin-bottom: 20rpx;
		}

		.empty-text {
			font-size: 28rpx;
			color: #999;
		}
	}

	.upload-btn-container {
		display: flex;
		justify-content: center;
		gap: 20rpx;
		padding: 30rpx;
		background-color: rgba(0, 0, 0, 0.02);
		border: 2rpx dashed #ccc;
		margin: 20rpx;
		border-radius: 12rpx;
	}

	.upload-btn-area {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 12rpx;
		width: 45%;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		position: relative;
		// margin: 20rpx auto;

		.upload-icon {
			width: 100rpx;
			height: 100rpx;
			background-color: #fff;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 20rpx;

			.icon-img {
				width: 100rpx;
				height: 100rpx;
			}
		}

		.upload-text {
			font-size: 30rpx;
			color: #333;
			margin-bottom: 10rpx;
		}

		.upload-tip {
			font-size: 24rpx;
			color: #999;
		}
	}

	.section-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.textarea {
		width: 100%;
		height: 200rpx;
		background-color: #f9f9f9;
		border-radius: 12rpx;
		padding: 20rpx;
		font-size: 28rpx;
		color: #333;
		margin: 20rpx 0;
	}

	.example-body {
		margin: 24rpx 0;
	}

	.dianji-anniu {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 2;

		.uni-file-picker {
			width: 100% !important;
			height: 100% !important;
			opacity: 0;
		}

		:deep(.uni-file-picker__container) {
			opacity: 0;
		}

		:deep(.is-add) {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			border: none;
			background: transparent;
		}
	}

	.popup-box-text {
		width: calc(100% - 72rpx);
		height: 70vh;
		overflow: auto;
		padding: 36rpx;
		color: rgba(0, 0, 0, 0.85);
		font-size: 26rpx;
	}

	// 已上传文件列表样式
	.uploaded-files {
		margin-top: 20rpx;
		width: 100%;

		.file-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;
			background-color: #f9f9f9;
			border-radius: 8rpx;
			margin-bottom: 10rpx;

			.file-info {
				display: flex;
				align-items: center;
				flex: 1;
				overflow: hidden;

				.file-icon {
					width: 60rpx;
					height: 60rpx;
					margin-right: 20rpx;

					.icon-img {
						width: 100%;
						height: 100%;
					}
				}

				.file-details {
					flex: 1;
					overflow: hidden;

					.file-name {
						font-size: 26rpx;
						color: #333;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						margin-bottom: 4rpx;
					}

					.file-size {
						font-size: 22rpx;
						color: #999;
					}
				}
			}

			.file-action {
				.delete-icon {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 40rpx;
					height: 40rpx;
					color: #999;
					font-size: 40rpx;
					background-color: #eee;
					border-radius: 50%;

					&:active {
						background-color: #ddd;
					}
				}
			}
		}
	}

	.container {
		padding: 20px;
	}

	.file-item {
		margin: 10px 0;
		padding: 10px;
		border: 1px solid #eee;
		border-radius: 4px;
	}

	.status {
		margin-left: 10px;
		font-size: 12px;
	}

	.pending {
		color: #666;
	}

	.uploading {
		color: #007aff;
	}

	.success {
		color: #4caf50;
	}

	.error {
		color: #ff0000;
	}

	progress {
		width: 100%;
	}

	.preview-area {
		margin-top: 20rpx;
		width: 100%;

		.preview-item {
			display: flex;
			align-items: center;
			padding: 20rpx;
			background-color: #fff;
			border-radius: 12rpx;
			margin-bottom: 20rpx;
			box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);

			.preview-image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 8rpx;
				margin-right: 20rpx;
			}

			.file-icon {
				width: 120rpx;
				height: 120rpx;
				background-color: #f5f5f5;
				border-radius: 8rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 20rpx;

				.icon-img {
					width: 60rpx;
					height: 60rpx;
				}
			}

			.file-info {
				flex: 1;
				overflow: hidden;

				.file-name {
					font-size: 28rpx;
					color: #333;
					margin-bottom: 8rpx;
					display: block;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.file-size {
					font-size: 24rpx;
					color: #999;
				}
			}

			.file-status {
				font-size: 24rpx;
				margin-left: 20rpx;

				&.pending {
					color: #666;
				}

				&.uploading {
					color: #007aff;
				}

				&.success {
					color: #4caf50;
				}

				&.error {
					color: #ff0000;
				}

				progress {
					margin-top: 10rpx;
					width: 100rpx;
				}
			}
		}
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: auto;
	}

	.content-index-image {
		width: 100%;
		height: auto;
		object-fit: contain;
	}

	.form-details {
		margin-bottom: 24rpx;
	}

	.time_out_btn {
		background-color: #aaaaaa !important;
	}
</style>